* {
  margin: 0;
  padding: 0;
}
body {
  width: 100vw;
  height: 100vh;
  background: #e3e4e8;
}

.wrap {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 800px;
}
.can {
  position: absolute;
  left: calc(50% - 175px);
  top: 30%;
  width: 350px;
  height: 200px;
  transition: all 0.3s linear;
}
.can_wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 350px;
  height: 200px;
  transform-style: preserve-3d;
  animation: rotate 15s linear infinite;
}

.can_sector {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100px;
  font: bold 100px/100px "Arial Rounded MT Bold";
  /* 向左自身宽度一半 */
  /* transform: translate(-50%); */
  /* 渐变效果 */
  background: linear-gradient(rgb(184, 90, 13), orange, rgb(236, 217, 217));
  background-clip: text;
  color: transparent;
  transform-origin: center bottom;
}

@keyframes rotate {
  from {
    transform: rotateX(360deg);
  }
  to {
    transform: rotateX(0deg);
  }
}

/* 表单 */
form {
  position: absolute;
  left: calc(50% - 175px);
  bottom: 40px;
  width: 350px;
  text-align: center;
}
.digits {
  width: 65px;
  height: 25px;
  padding: 8px 12px;
  border: 1px solid #666;
  border-radius: 4px;
  font-size: 16px;
  line-height: 25px;
  color: #333;
  vertical-align: middle;
}
.option input {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
.option span {
  display: inline-block;
  height: 25px;
  line-height: 25px;
  vertical-align: middle;
}
